html,
body {
  /* 保证超出浏览器边框的画面内容不显示（不出现滚动条） */
  overflow: hidden;

  /* 保证画面与浏览器边框之间无间距 */
  margin: 0;

  /* 保证画面大小始终与浏览器显示区大小一致（=画面显示区大小随着浏览器显示区变化而随时变化） */
  width: 100%;
  height: 100%;  

  /* 部分Vue项目的字体设置。参照文章：
    https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ 
      Group1: Mac操作系统UI字体
        -apple-system: targets Safari on Mac OS X and iOS
        BlinkMacSystemFont: targets Chrome on Mac OS X
      Group2: 其他操作系统UI字体
        'Segoe UI': targets Windows and Windows Phone
        'Roboto': targets Android and newer Chrome OS
        'Oxygen': targets KDE
        'Ubuntu': targets Ubuntu
        'Cantarell': targets GNOME
        'Fira Sans': targets Firefox OS
        'Droid Sans': targets older versions of Android
      Group3:
        'Helvetica Neue': targets pre-El Capitan versions of Mac OS X
        sans-serif: the default sans-serif fallback font
  */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

  /* 用于webkit引擎(如chrome)中设置字体的抗锯齿或者说光滑度的属性,使用后字体看起来会更清晰舒服。
      none: 无抗锯齿（对低像素的文本比较好）
      subpixel-antialiased: @default 次像素平滑（常见于Mac OS和MacType For Windows） 
      antialiased: 灰度平滑抗锯齿（常用于Android和iOS等移动设备）
  */
  -webkit-font-smoothing: antialiased;

  /* 用于FireFox中设置字体的抗锯齿或者说光滑度的属性,使用后字体看起来会更清晰舒服。
      auto: 浏览器自动选择是否进行字体抗锯齿，通常是做灰度优化。
      grayscale: 强制使用灰度消除锯齿渲染字体。
  */
  -moz-osx-font-smoothing: grayscale;
}

* {
  /* 所有元素使用盒子模型
     任何一个画面html元素的表示区域被视为盒子 = 外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）
     content-box: 标准盒子模型的元素宽高 = content（内容）
     border-box: 非标准盒子模型的元素宽高 = border（边框） + 内边距（padding）+ content（内容）
  */
  box-sizing: border-box;
}

body {
  /* flex布局，且其中App元素上下居中显示 */
  display: flex;
  place-items: center;
}

#app {
  /* App元素左右居中显示 */

  /* 保证App全局高度始终与浏览器显示区高度一致（=画面显示区高度随着浏览器显示区高度变化而随时变化） */
  margin: 0 auto;
  max-width: 1280px;

  /* App全局的字体大小，颜色设定 */
  font-size: 28px;
  color: @font-color;
}
